import { ref } from 'vue'
import { useMapStore } from '@/stores/map.js'
import { storeToRefs } from 'pinia'
// 引入pinia的事件信息
import { Query } from '@/Utils/Query.js'

export const useAccidentProneAreasChart = () => {
  const { map } = storeToRefs(useMapStore())
  const position = ref([])
  // const radius = ref(30)
  // const blur = ref(20)

  // 作用域问题,数据源定义在点击事件外面,每次店家source才能被清掉
  var source = new ol.source.Vector({})

  const accidentProneAreasChart = () => {
    // 查询事件点图层的所有事件
    var service = {
      name: 'guanggu',
      layerId: 2
    }
    Query.queryByLayer({
      service,
      callback: (res) => {
        if (res) {
          source.clear()
          map.value.removeLayer(map.value.getLayers().item(4))
          position.value = res.map((item) => item.values_.geometry.flatCoordinates)
          position.value.forEach((item) => {
            var point = new ol.Feature({
              geometry: new ol.geom.Point(item)
            })
            source.addFeatures([point])
          })
          // //创建一个Heatmap图层
          var vector = new ol.layer.Heatmap({
            //矢量数据源
            source: source,
            //热点半径
            radius: 20,
            //模糊尺寸
            blur: 10
          })
          // /* 4、将图层添加到地图 */
          map.value.addLayer(vector)
          setTimeout(() => {
            source.clear()
          }, 5000)
        }
      }
    })
  }
  return { accidentProneAreasChart }
}
